<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的关注</title>
    <!--公共css与js文件-->
    <th:block th:include="front/common/common_resource::resources"/>
    <script th:src="@{/js/front/follow.js}"></script>
    <script th:src="@{/js/pagetool.js}"></script>

    <!--在使用模板解析时会自动删除-->
    <th:block th:remove="all">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="../../static/jquery/jquery.min.js"></script>
        <script src="../../static/js/bootstrap.min.js"></script>
        <!-- Custom Theme files -->
        <link href="../../static/css/style.css" rel='stylesheet' type='text/css'/>

        <!--font-Awesome-->
        <link href="../../static/css/font-awesome.css" rel="stylesheet"/>
        <!--font-Awesome-->
    </th:block>
</head>

<body>
<!-- 导航栏 -->
<th:block th:include="front/common/header::nav"/>

<div class="grid_3">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="breadcrumb1">
                    <ul>
                        <i class="fa fa-heart-o home_1"></i>
                        <span class="divider">&nbsp;|&nbsp;</span>
                        <li class="current-page">我的关注：</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row">
            <!--左侧消息列表-->
            <div class="col-md-9">
                <div class="careMessage">
                    <div class="row">
                        <ul class="nav nav-pills">
                            <li role="presentation" class="active"><a role="tab" href="#myfollowPanel" id="myfollow-tab" data-toggle="tab">我关注的人(<span id="myfollow-count"></span>)</a></li>
                            <li role="presentation"><a role="tab" href="#followerPanel" id="follower-tab" data-toggle="tab">关注我的人(<span id="follower-count"></span>)</a></li>
                        </ul>
                    </div>
                    <hr/>
                    <div class="row">
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade in active" id="myfollowPanel">
                                <div class="jobs-item">

                                </div>
                            </div>
                            <div class="tab-pane fade in" id="followerPanel">
                                <div class="jobs-item">

                                </div>
                            </div>
                        </div>
                        <div id="pagetool">
                            <ul class="pagination">
                                <li class="head"><a href="#">首页</a></li>
                                <li class="lastpage"><a href="#"><i class="fa fa-angle-left"></i></a></li>
                                <li class="disabled morehead"><a>...</a></li>
                                <li class="page-4"><a></a></li>
                                <li class="page-3"><a></a></li>
                                <li class="page-2"><a></a></li>
                                <li class="page-1"><a></a></li>
                                <li class="currentpage active"><a>1</a></li>
                                <li class="page_1"><a></a></li>
                                <li class="page_2"><a></a></li>
                                <li class="page_3"><a></a></li>
                                <li class="page_4"><a></a></li>
                                <li class="disabled moretail"><a>...</a></li>
                                <li class="nextpage"><a href="#"><i class="fa fa-angle-right"></i></a></li>
                                <li class="tail"><a href="#">尾页</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>

            <!--右侧导航栏-->
            <div class="col-md-3 col_5">
                <div class="center-middle" style="background-color: white">
                    <a th:href="@{'/profile/'+${session.user.id}}"><img th:src="@{/file(path=${session.user.photo})}" class="pub-msg-img"/>
                    <p th:text="${session.user.nickname}"></p></a>
                    <p th:inline="text">ID:&nbsp;[[${session.user.id}]]</p>
                </div>
                <!--消息菜单栏-->
                <ul class="match_box message">
                    <a th:href="@{/letter}"><li><i class="fa fa-comments-o"></i> 私信<span id="letter-count" th:inline="text">([[${letterCount}]])</span></li></a>
                    <a th:href="@{/follow}"><li><i class="fa fa-heart"></i> 关注<span id="follow-count">([[${followCount}]])</span></li></a>
                    <a th:href="@{/visit_trace}"><li><i class="fa fa-eye"></i> 访问记录<span id="record-count">([[${visitTraceCount}]])</span></li></a>
                    <a th:href="@{/notice}"><li><i class="fa fa-envelope-o"></i> 系统通知<span id="notice-count">([[${noticeCount}]])</span></li></a>
                </ul>

                <!--广告栏-->
                <ul class="match_box">
                    <li><h4>猜你喜欢</h4></li>
                    <hr/>
                    <li th:each="star:${stars}">
                        <div class="jobs-item with-thumb">
                            <div class="thumb_top">
                                <div class="thumb">
                                    <a th:href="@{'/profile/'+${star.id}}">
                                        <img th:src="@{/file(path=${star.photo})}" style="width: 70px;height: 70px;" class="img-responsive"/>
                                    </a>
                                </div>
                                <div class="jobs_right">
                                    <a th:href="@{'/profile/'+${star.id}}"><h5 th:text="${star.nickname}"></h5></a>
                                    <p th:inline="text">[[${star.age}]]岁&nbsp;[[${star.education}]]</p>
                                    <span th:text="${star.workplace}"></span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <hr/>

                    <li><a th:href="@{/search}" class="photo_view center-block "
                           style="color: white;text-align: center">想查看更多吗</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>

            <div class="clearfix"></div>
        </div>

    </div>
</div>


<!--页面尾部-->
<th:block th:include="front/common/footer::foot"/>

</body>
</html>	